<template>
  <view class="head" :style="{ height: titleBarHeight, paddingTop: statusBarHeight, background: bgColor }">
    <view class="">
      <view class="fh" @click="gotoFh()">
        <!-- <image :src="icon" mode="" ></image> -->
        <u-icon name="arrow-left" color="#323232 " size="48rpx"></u-icon>
        <text :style="{ color: fhColor }">{{ fh }}</text>
      </view>
      <text :style="{ color: color }">{{ title }}</text>
      <view class="end">
        <slot name="headRight"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "uni-head",
  props: {
    title: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "/static/images/icon/fh.png",
    },
    color: {
      type: String,
      default: "#323232",
    },
    fhColor: {
      type: String,
      default: "#323232",
    },
    bgColor: {
      type: String,
      default: "transparent",
    },
    fh: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      titleBarHeight: "",
      statusBarHeight: "",
    };
  },
  created() {
    var that = this;
    // 根据设备给予顶部不同高度
    // uni.getSystemInfo({
    //   success: function (res) {
    //     if (res.model.indexOf("iPhone") !== -1) {
    //       that.titleBarHeight = 12 + "vh";
    //     } else {
    //       that.titleBarHeight = 11 + "vh";
    //     }
    //     that.statusBarHeight = res.statusBarHeight + 10 + "px";
    //   },
    // });
  },
  methods: {
    clickLeft() {
      uni.showToast({
        title: "左侧按钮",
      });
    },
    gotoFh() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  // background: #107BFD;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24rpx 11rpx 24rpx 0;
  box-sizing: border-box;
  // box-shadow: 0rpx 20rpx 40rpx #0157ff1a;
  position: relative;
  z-index: 11 !important;
  > view {
    // padding-top: 88rpx;
    width: 100%;
    display: flex;
    //justify-content: space-between;

    .fh,
    .end {
      // min-width: 112rpx;
      // margin-right: 52rpx;
      margin-right: 46rpx;
      display: flex;
      align-items: center;
      // position: absolute;
      // left: 24rpx;
      > image {
        width: 48rpx;
        height: 48rpx;
        margin-top: 4rpx;
        margin-right: 10rpx;
      }
      > text {
        font-weight: 500;
        font-size: 36rpx;
        color: #323232;
      }
    }
    > text {
      text-align: center;
      font-weight: 500;
      font-size: 36rpx;
      color: #323232;
    }
  }
}
</style>
